<template>
    <el-dialog v-model="dialogVisible" :before-close="handleClose">
        <template #title>
            <div class="fs-20 bold">
                个人额度设置<span class="fs-14 fc-grey mg-l-25 normal">设置个人预支额度后，申请额度将根据个人额度限制判断（其他额度限制不生效）</span>
            </div>
        </template>
        <div class="box">
            <div class="flex head">
                <div class="flex-1 border bold">姓名</div>
                <div class="flex-2 border bold">身份证号</div>
                <div class="flex-2 border bold">手机号</div>
            </div>
            <div class="flex body">
                <div class="flex-1 border">李立明</div>
                <div class="flex-2 border">2342342334343242</div>
                <div class="flex-2 border">1233333333</div>
            </div>
        </div>
        <div class="flex flex-ai-c mg-t-30">
            <div class="bold"><span class="fc-red">*</span>单词申请额度上限：</div>
            <div>
                <el-input-number v-model="num" :step="2" placeholder="请输入金额" />
            </div>
        </div>
        <template #footer>
            <div class="flex dialog-footer flex-jc-c">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dialogVisible: false,
            num: ''
        }
    },
    watch: {
        show(newval) {
            this.dialogVisible = newval
        },
        dialogVisible(newval) {
            this.$emit('update:show', newval)
        }
    },
    methods: {
        handleClose() {
            this.dialogVisible = false
        }
    }
})
</script>
<style lang="stylus" scoped>
.box
    background #F5F5F7
    padding 24px
    margin-top -20px
.mg-t-24
    margin-top 24px
.fc-pink
    color #FF7E68
.fs-38
    font-size 38px
.flex-item
    flex-basis 50%
    font-size 12px
    margin-top 24px
.fc-light
    color #9497B1
.border {
    background #fff
    border-right 1px solid #F5F5F7
    border-bottom 1px solid #F5F5F7
    text-align center
    padding 16px 0
}
</style>